<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body,.P-app{
            width: 100%;
            height: 100%;
        }
        .P-app{
            background: #f8f8f8;
        }
        .box{
            width: 100px;
            height:100px; 
            background:red;
            position: fixed;
            left: 100px;
            top:100px;
        }
    </style>
</head>

<body>
    <div id="app" class="P-app">
        
    </div>
    <!--<script>alert('测试页面是不是 realod 了')</script>-->
    <!--<div class="box"id="box"></div>-->
    // <script>
    // let dom = document.getElementById('box');
    // let windW = window.innerWidth;
    // let windH = window.innerHeight;
    // let w = dom.clientWidth;
    // let h = dom.clientHeight;
    // let delay = 200;
    // let xstep = ystep = 10;
    // window.setTimeout(()=>{
    //     // calc();
    // }, delay);
    // function calc(){
    //     console.log('offsetTop:');
    //     console.log(dom.offsetTop);
    //     console.log('offsetLeft:');
    //     console.log(dom.offsetLeft);
    //     console.log('offsetRight:');
    //     console.log(dom.offsetRight);
    //     console.log('offsetBottom:');
    //     console.log(dom.offsetBottom);
    //     console.log(dom.style.left)
    //     // dom.style.left = 
    //     let curL = dom.offsetLeft;
    //     let curT = dom.offsetTop;
    //     let newL;
    //     let newT;
        
    //     if(curL+w>=windW || curL<=0){
    //         //开始减
    //         xstep = 0-xstep;
    //     }
    //     console.log(`xstep: ${xstep}`);
    //     newL = curL+xstep;

    //     if(curT+h>=windH || curT<=0){
    //         //开始减
    //         ystep = 0-ystep;
    //     }
    //     newT = curT+ystep;

    //     console.log(`newL:${newL}, newT: ${newT}`);
    //     dom.style.left = `${newL}px`;
    //     dom.style.top = `${newT}px`;
    //     window.setTimeout(()=>{
    //         calc();
    //     }, delay);
    // }
    // </script>
</body>

</html>